<template>
	<view class="content">
		<!-- 		<view class="search_area">
			<u-search placeholder="搜索" v-model="keyword"></u-search>
		</view>
 -->
		<!-- loading -->
		<view class="mask" v-if="loading">
			<view class="preloader">
				<view class="loader"></view>
			</view>
		</view>
		<view v-else>
			<view v-if="chatList.length>0">
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in chatList" :key="item.uid" @click="click"
				 @open="open" :options="options" :btn-width="120">
					<view class="item u-border-bottom" @tap="toChat(item)">
						<view style="display: flex;width: 75%;align-items: center;">
							<image class="avater" mode="aspectFill" :src="item.face" />
							<view class="title-wrap">
								<text class="title u-line-2">{{ item.username }}</text>
								<!-- <text class="title2">{{ item.msg }}</text> -->
								<rich-text :nodes="item.msg" class="title2"></rich-text>
							</view>
						</view>
						<view class="right">
							<view class="time">{{ item.time }}</view>
							<view class="tis" v-if="item.tisNum>0">{{item.tisNum}}</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
			<view v-if="chatList.length==0" style="display: flex; flex-direction: column; align-items: center;justify-content: center; margin-top: 250upx;">
				<view style="font-size: 35upx; color: #999999; font-weight: 700;">暂无会话</view>
			</view>
			
			<md-kefu></md-kefu>
		</view>
	</view>
</template>

<script>
	import main from '../../../main.js';
	import {
		formatTime
	} from "../../../utils/common.js";
	import eventBus from '../../../utils/EventBus.js';
	import app from '../../../App.vue'
	import mdKefu from '@/components/MdKefu/index.vue';
	
	export default {
		data() {
			return {
				keyword: '', // 搜索关键字
				chatList: [],
				options: [
					/* {
											text: '置顶',
											style: {
												backgroundColor: '#747474',
												display: "flex"
											}
										}, */
					{
						text: '删除',
						style: {
							backgroundColor: '#FF5A45'
						}
					}
				],
				loading: false
			}
		},
		components: {
			mdKefu
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			var _this = this;
			_this.loading = true
			_this.refreshConversation(function(data) {
				console.log("会话->", data);
				if (data.code !== 0) return;
				_this.chatList = []; //先清空旧数据
				data.conversations.forEach(item => {
					if (item.extras.msg) {
						_this.chatList.unshift({
							uid: item.username,
							username: item.nickName,
							face: item.avatar,
							time: formatTime(item.mtime / 1000, "{y}-{m}-{d}"),
							msg: item.extras.msg,
							tisNum: item.unread_msg_count,
							show: false
						});
					}
				});
				_this.loading = false
				uni.stopPullDownRefresh();
			});
		},
		onLoad() {
			eventBus.$on('onNewMsg', senderId => {
				var _this = this;
				_this.loading = true
				_this.refreshConversation(function(data) {
					console.log("会话->", data);
					if (data.code !== 0) return;
					_this.chatList = []; //先清空旧数据
					data.conversations.forEach(item => {
						if (item.extras.msg) {
							_this.chatList.unshift({
								uid: item.username,
								username: item.nickName,
								face: item.avatar,
								time: formatTime(item.mtime / 1000, "{y}-{m}-{d}"),
								msg: item.extras.msg,
								tisNum: item.unread_msg_count,
								show: false
							});
						}
					})
					_this.loading = false
				});
			});
		},
		onShow() { //每次返回都应该刷新数据
			var _this = this;
			if (_this.loading) {
				return false
			}
			_this.refreshConversation(function(data) {
				console.log("onshow会话->", data);
				if (data.code !== 0) return;
				_this.chatList = []; //先清空旧数据
				let unReadCount = 0;
				data.conversations.forEach(item => {
					if (item.extras.msg) {
						_this.chatList.unshift({
							uid: item.username,
							username: item.nickName,
							face: item.avatar,
							time: formatTime(item.mtime / 1000, "{y}-{m}-{d}"),
							msg: item.extras.msg,
							tisNum: item.unread_msg_count,
							show: false
						});
					}
					if (unReadCount) {
						unReadCount = unReadCount + item.unread_msg_count;
					} else {
						unReadCount = item.unread_msg_count;
					}
				});
				uni.setStorageSync("unReadCount", unReadCount);
			});
			// 每次重新显示消息列表页面时,重置一个其他人的未读消息数,不然点击过的那个人未读消息数始终为0
			main.jim.resetUnreadCount({
				'username': 'modazhushou'
			});
		},
		methods: {
			click(index, index1) { // index表示行数   index1表示点击侧滑后的第几个按钮,从左往右算 从0开始计数
				if (index1 == 0) {
					main.jim.updateConversation({
						'username': this.chatList[index].uid,
						'extras': {}
					}); //删除它的最后一条消息记录
					uni.removeStorageSync(this.chatList[index].uid);
					this.chatList.splice(index, 1);
				}
				/* else {
									this.chatList[index].show = false;
									this.$u.toast(`置顶成功`);
								} */
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.chatList[index].show = true;
				this.chatList.map((val, idx) => {
					if (index != idx) this.chatList[idx].show = false;
				})
			},
			toChat(chat) {
				// 重置单聊会话，调用则成功，无回调函数
				main.jim.resetUnreadCount({
					'username': chat.uid
				});
				uni.navigateTo({
					url: "/pagesB/pages/chat/chat?name=" + chat.username + "&imUser=" + chat.uid + "&face=" + chat.face
				});
			},
			delChat(chat) {
				// 删除会话
			},
			refreshConversation(setConvData) {
				console.log("是否登录->", app.globalData.jmLogin);
				main.jim.getConversation().onSuccess(function(data) {
					setConvData(data);
				}).onFail(function(data) {
					console.log("获取会话失败->", data);
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/loading.scss";

	.search_area {
		margin: 26upx 30upx 41upx 30upx;
	}

	.content {
		border-top: 1px solid #f4f4f4;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 20upx 32upx 20upx 32upx;

		.avater {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}


	.title {
		text-align: left;
		font-size: 28upx;
		color: #111111;
		margin: 0upx 0 5upx 0;
		font-weight: bold;
	}

	.title2 {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24upx;
		color: #909090;
	}

	.right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		width: 25%;

		.time {
			color: #909090;
			font-size: 24upx;
		}

		.tis {
			width: 35upx;
			height: 35upx;
			font-size: 22upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10upx;
			background-color: #eb4d3d;
			color: #fff;
			border-radius: 100%;
		}
	}
</style>
